<template>
  <div v-if="publicElectiveStandard && publicElectiveStandard.length">
    <edu-table :data="standardTableData" :order="false" :pagination="false" border :selection="false"
               :merge='true' :show-header="false" :stripe="false" :rowStyle="rowStyle" style="width: 100%;margin-top: 20px;">
      <edu-table-column min-width="280">
        <template slot-scope="scope">
          <div>
            <span style="margin-right: 20px;">{{scope.row.labName}}</span>
            <el-input v-if="isSetting" v-model="scope.row.credit" type="number" min="0" style="width: 10%"/>
            <span v-else>
              {{ showGotCredit ? (scope.row.getCredit|| 0) + '/' + (scope.row.credit|| 0) : (scope.row.credit|| 0) }}
            </span>
          </div>
        </template>
      </edu-table-column>
    </edu-table>
  </div>
</template>
<script>
  export default {
    name: 'publicElectiveStandard',
    props: {
      isSetting: {
        type: Boolean,
        default: false
      },
      showGotCredit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        standardTableData: [],
        labName: '通识选修课学分标准: ',
        publicElectiveStandard: []
      };
    },
    methods: {
      rowStyle({ rowIndex }) {
        if (!rowIndex) {
          return "background: #f4f7fa";
        }
      },
      init(data) {
        this.publicElectiveStandard = data;
        if (data && data.length) {
          const current = this.publicElectiveStandard[0];
          this.standardTableData = [{
            labName: this.labName,
            credit: current.credit,
            getCredit: current.getCredit || 0
          }];
        }
      }
    }
  };
</script>
